<template>
	<div class="page-container">
		<el-collapse class="page-collapse">
			<el-collapse-item  name="1">
				<template slot="title"><svg-icon icon-class="search" />&nbsp;条件过滤</template>
				<el-form class="page-searchbar" ref="form" :model="params" label-width="80px" size="mini"  @keyup.enter.native="search()">
					<el-row>
						<el-col :span="6">
							<el-form-item label="用户名：" :label-width="formLabelWidth" >
								<el-input v-model="params.userName" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="姓名：" :label-width="formLabelWidth" >
								<el-input v-model="params.name" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>
						<!--<el-col :span="6">
							<el-form-item label="账号：" :label-width="formLabelWidth" >
								<el-input v-model="params.account" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>-->

						<el-col :span="6">
							<el-form-item label="性别：" :label-width="formLabelWidth" >
								<el-select v-model="params.female" class="filter-item"  placeholder="" clearable style="width: 100%;">
									<el-option v-for="item in femaleList" :key="item.value" :label="item.label" :value="item.value"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="手机号：" :label-width="formLabelWidth" >
								<el-input v-model="params.mobile" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="微信号：" :label-width="formLabelWidth" >
								<el-input v-model="params.wechatNum" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="qq：" :label-width="formLabelWidth" >
								<el-input v-model="params.qq" placeholder="" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="状态：" :label-width="formLabelWidth" >
								<el-select v-model="params.status" class="filter-item"  placeholder="" clearable style="width: 100%;">
									<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6" style="float: right;">
							<div class="sch_button" >
								<el-button type="success"  size="mini"  @click="search()">查询</el-button>
								<el-button  size="mini"  @click="resetSearch()">清空</el-button>
							</div>
						</el-col>

					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>

		<el-row class="page-optbutton">
			<el-button size="mini" type="success" plain @click="viewRec" >查看</el-button>
			<el-button size="mini" type="primary" plain  @click="addRec" >添加</el-button>
			<el-button size="mini" type="warning" plain  @click="editRec" >修改</el-button>
			<el-button size="mini" type="danger" plain  @click="deleteRec" >删除</el-button>
		</el-row>

		<div class="page-listtable">
			<el-table ref="dataTableRef" v-loading="listLoading"
					:data="list" element-loading-text="列表加载中..."
					border fit highlight-current-row
					@selection-change="tableSelectionChange"
					@row-click="clickRow" size="small"
					height="660" @sort-change="sortChange">
				<el-table-column type="selection" width="30" align="center" ></el-table-column>
				<el-table-column label="序号" align="center" width="50"  :render-header="renderHeader" >
					<template slot-scope="scope">{{(params.limit*(params.page-1))+ scope.$index+1 }}</template>
				</el-table-column>
				<el-table-column label="用户名" min-width="80" prop="userName" v-if="columnIf.userName.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.userName }}</template>
				</el-table-column>
				<el-table-column label="姓名" min-width="80" prop="name" v-if="columnIf.name.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.name }}</template>
				</el-table-column>
				<!--<el-table-column label="账号" min-width="80" prop="account" v-if="columnIf.account.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.account }}</template>
				</el-table-column>-->
				<el-table-column label="密码" min-width="80" prop="password" v-if="columnIf.password.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.password }}</template>
				</el-table-column>
				<el-table-column label="性别" min-width="80" prop="female" v-if="columnIf.female.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.female | sexFilter }}</template>
				</el-table-column>
				<el-table-column label="手机号" min-width="80" prop="mobile" v-if="columnIf.mobile.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.mobile }}</template>
				</el-table-column>
				<el-table-column label="头像" min-width="80" prop="portrait" v-if="columnIf.portrait.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.portrait }}</template>
				</el-table-column>
				<el-table-column label="微信号" min-width="80" prop="wechatNum" v-if="columnIf.wechatNum.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.wechatNum }}</template>
				</el-table-column>
				<el-table-column label="qq" min-width="80" prop="qq" v-if="columnIf.qq.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.qq }}</template>
				</el-table-column>
				<el-table-column label="状态" min-width="80" prop="status" v-if="columnIf.status.visible" align="center" sortable="custom" show-overflow-tooltip >
					<template slot-scope="scope">{{ scope.row.status | statusFilter }}</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page-pagination">
			<el-pagination
				:page-sizes="$store.getters.page_sizes"
				:page-size="params.limit"
				layout="total, sizes, prev, pager, next, jumper,slot"
				:current-page="params.page"
				:total="total"
				@size-change="pageSizeChange"
				@current-change="currentPageChange">
				<el-button type="text"  class="refreshBnt" @click="refresh()">
					<i class="el-icon-refresh">刷新</i>
				</el-button>
			</el-pagination>
		</div>
		<el-dialog  :title="dialogTitle"
				:visible.sync="sysUserInfoShowDialogVisible"
				:closeOnClickModal="false"  width="1300px" >
			<sysUserInfoShowDialog :dataObj="selObj" class="page-dialogTabDiv" v-if="sysUserInfoShowDialogVisible" ref="sysUserInfoShowDialogRef" @closeDialog="closeDialog"></sysUserInfoShowDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button @click="sysUserInfoShowDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-dialog  :title="dialogTitle"  v-if="sysUserInfoDialogVisible"
				:visible.sync="sysUserInfoDialogVisible"
				:closeOnClickModal="false"  width="1300px" >
			<sysUserInfoDialog :dataObj="selObj" class="page-dialogTabDiv" v-if="sysUserInfoDialogVisible" ref="sysUserInfoDialogRef" @closeDialog="closeDialog"></sysUserInfoDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button type="primary" @click="$refs.sysUserInfoDialogRef.save()" >保存</el-button>
				<el-button @click="sysUserInfoDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-dialog center title="自定义列"  :visible.sync="columnDialogVisible" width="800px" top="10vh" :closeOnClickModal="false">
			<columnDialog :columnIf="columnIf" class="page-dialogTabDiv" ref="columnDialogRef"></columnDialog>
			<div slot="footer" class="dialog-footer" align="center">
				<el-button @click="columnDialogVisible = false">关闭</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
import global_ from "@/utils/GlobalDict";
import {bntPerm,permConfig}  from "@/utils/btnPermissions.js";
import { sysUserInfoList,deleteSysUserInfo } from "@/api/system/sysUserInfo";
import columnDialog from '@/views/layout/columnDialog.vue';
import sysUserInfoShowDialog from '@/views/system/dialog/sysUserInfoShowDialog.vue';
import sysUserInfoDialog from '@/views/system/dialog/sysUserInfoDialog.vue';
export default {
	components: {
		columnDialog,
		sysUserInfoShowDialog,
		sysUserInfoDialog,
	},
	filters: {
	},
	data(){
		return {
			columnIf:{
				userName:{ visible:true, label:'用户名' },
				name:{ visible:true, label:'姓名' },
				password:{ visible:true, label:'密码' },
				female:{ visible:true, label:'性别' },
				mobile:{ visible:true, label:'手机号' },
				portrait:{ visible:true, label:'头像' },
				wechatNum:{ visible:true, label:'微信号' },
				qq:{ visible:true, label:'qq' },
				remark:{ visible:true, label:'备注' },
				status:{ visible:true, label:'状态' },
			},
			formLabelWidth:'130px',
			params:{
				limit:10,
				page:1,
			},
			listLoading:true,
			list:[],
			total:0,
			selArr:[],
			selObj:new Object(),
			dialogTitle:'编辑',
			columnDialogVisible:false,
			sysUserInfoShowDialogVisible:false,
			sysUserInfoDialogVisible:false,
			idArr:[],
      femaleList:global_.elSelectConverter(global_.sex),
      statusList:global_.elSelectConverter(global_.status),
		}
	},
	methods: {
		showColumn(event){
			this.columnDialogVisible = true;
		},
		renderHeader(h,{column}){
			return h(
				'span',[
				h('span', column.label),
				h('i', {
					class:'el-icon-setting',
					style:'color:#409eff;margin-left:5px;',
					on:{
						click:this.showColumn
					}
				}
				)
				],
			);
		},
		sortChange({ column, prop, order }){
			if(column){
				var sortText = column.property;
				if(order=="ascending"){
					sortText+=" asc";
				}else{
					sortText+=" desc";
				}
				this.params.orderByClause=sortText+"";
				this.params.page=1;
				this.refresh();
			}
		},
		refresh(){
			this.listLoading = true;
			this.getTableList();
		},
		getTableList(){
			sysUserInfoList(this.params).then(response => {
				this.list=response.data.rows;
				this.total= response.data.totalCount;
				this.listLoading=false;
			});

		},
		pageSizeChange(pageSize){
			this.params.limit=pageSize;
			this.refresh();
		},
		currentPageChange(currentPage){
			this.params.page=currentPage;
			this.refresh();
		},
		search(){
			this.refresh();
		},
		resetSearch(){
			this.params={};
			this.createTimeArr=[];
			this.modifyTimeArr=[];
			this.params.page=1;
			this.params.limit=10;
			this.refresh();
		},
		tableSelectionChange(s){
			this.selArr=[];
			this.idArr=[];
			for (var i=0;i<s.length;i++){
				this.selArr.push(s[i]);
				this.idArr.push(s[i].id);
			}
		},
		clickRow(row){
			this.$refs.dataTableRef.clearSelection();
			this.$refs.dataTableRef.toggleRowSelection(row);
		},
		isSelectOne(){
			var text = "";
			if(this.selArr.length==1){
				return this.selArr[0];
			}else if(this.selArr.length==0){
				text = "请选择一条数据";
			}else{
				text = "您已选择多条数据！当前操作只能选择一条数据";
			}
			this.$alert(text, '提示', {
				confirmButtonText: '确定',
				callback: action => {}
			});
			return null;
		},
		closeDialog(reload){
			if(reload==1){
				this.getTableList();
			}
			this.columnDialogVisible=false;
			this.sysUserInfoShowDialogVisible=false;
			this.sysUserInfoDialogVisible=false;
		},
		viewRec(){
			var obj = this.isSelectOne();
			if(obj!=null){
				this.dialogTitle="查看";
				this.selObj=obj;
				this.sysUserInfoShowDialogVisible=true;
			}
		},
		addRec(){
			this.selObj={};
			this.dialogTitle="添加";
			this.sysUserInfoDialogVisible=true;
		},
		editRec(){
			var obj = this.isSelectOne();
			if(obj!=null){
				this.dialogTitle="修改";
				this.selObj=Object.assign({},obj);
				this.sysUserInfoDialogVisible=true;
			}
		},
		deleteRec(){
			if(this.idArr.length==0){
				this.$alert('请至少选择一条记录', '提示', {
					confirmButtonText: '确定',
					callback: action => {}
				});
				return;
			}
			this.$confirm('是否删除选中的'+this.idArr.length+'条记录?', '删除', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var paraObj = new Object();
				paraObj.ids=this.idArr.join(",");
				deleteSysUserInfo(paraObj).then(response => {
					if(response.data.success){
						this.$alert("删除成功", "删除成功", {
							confirmButtonText: '确定',
						});
						this.refresh();
					}else{
						this.$alert("删除失败", "删除失败", {
							confirmButtonText: '确定',
						});
					}
				});
			});
		},
	},
	created() {
		permConfig(this.$route.path);
		this.getTableList();
	}
}
</script>

